﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Revit 数据查看器</title>
    <link rel="stylesheet" href="/Html/Css/style.css">
    <style>
        @import url(Css/style.css);
    </style>
</head>
<body>
    <div class="container">
        <!-- 1. 左侧导航栏 -->
        <nav class="sidebar">
            <h2>数据类型</h2>
            <ul>
                <li><a href="#" class="nav-item active" data-view="rooms">房间 (Rooms)</a></li>
                <li><a href="#" class="nav-item" data-view="spaces">空间 (Spaces)</a></li>
                <li><a href="#" class="nav-item" data-view="areas">面积分区 (Areas)</a></li>
                <li><a href="#" class="nav-item" data-view="analytical-spaces">分析空间</a></li>
                <li><a href="#" class="nav-item" data-view="analytical-surfaces">分析表面</a></li>
                <li><a href="#" class="nav-item" data-view="linked-data">链接数据</a></li>
            </ul>
            <hr>
            <!-- 可以在这里添加其他全局操作按钮 -->
            <button class="action-button">刷新数据</button>
            <button class="action-button">导出数据</button>
        </nav>

        <!-- 2. 主要内容区域 -->
        <div class="main-content">
            <!-- 2a. 分类树 -->
            <aside class="tree-view">
                <h2>分类导航</h2>
                <div class="tree-container">
                    <!-- 这是一个静态示例，实际应用中需要JS动态生成 -->
                    <ul class="tree">
                        <li>
                            <span class="tree-toggle expanded"></span> <!-- +/- 图标 -->
                            <span class="tree-node-text">当前项目 (CurrentProject.rvt)</span>
                            <ul>
                                <li>
                                    <span class="tree-toggle expanded"></span>
                                    <span class="tree-node-text">标高 1 (Level 1)</span>
                                    <ul>
                                        <li><span class="tree-leaf"></span><span class="tree-node-text">房间 101</span></li>
                                        <li><span class="tree-leaf"></span><span class="tree-node-text">房间 102</span></li>
                                        <li><span class="tree-leaf"></span><span class="tree-node-text">空间 S101</span></li>
                                    </ul>
                                </li>
                                <li>
                                    <span class="tree-toggle collapsed"></span>
                                    <span class="tree-node-text">标高 2 (Level 2)</span>
                                    <!-- 折叠的内容 -->
                                </li>
                                <li>
                                    <span class="tree-toggle expanded"></span>
                                    <span class="tree-node-text">区域计划 A</span>
                                    <ul>
                                        <li><span class="tree-leaf"></span><span class="tree-node-text">区域 A-1</span></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span class="tree-toggle collapsed"></span>
                            <span class="tree-node-text">链接模型 (LinkedModel_ARCH.rvt)</span>
                            <!-- 折叠的内容 -->
                        </li>
                        <li>
                            <span class="tree-toggle collapsed"></span>
                            <span class="tree-node-text">链接模型 (LinkedModel_MEP.rvt)</span>
                            <!-- 折叠的内容 -->
                        </li>
                    </ul>
                </div>
            </aside>

            <!-- 2b. 数据展示表格 -->
            <section class="data-table-container">
                <h2 id="table-title">房间 数据</h2> <!-- 标题会根据导航栏选择变化 -->
                <div class="table-controls">
                    <input type="text" placeholder="筛选数据...">
                    <span>显示 1 - 10 / 共 55 条</span>
                </div>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>编号</th>
                                <th>面积 (m²)</th>
                                <th>体积 (m³)</th>
                                <th>标高</th>
                                <th>周长 (m)</th>
                                <!-- 根据数据类型可以动态增删列 -->
                                <th>部门 (自定义参数)</th>
                            </tr>
                        </thead>
                        <tbody id="data-body">
                            <!-- 这是一个静态示例，实际应用中需要JS动态填充 -->
                            <tr>
                                <td>12345</td>
                                <td>会议室</td>
                                <td>101</td>
                                <td>25.5</td>
                                <td>76.5</td>
                                <td>标高 1</td>
                                <td>21.0</td>
                                <td>行政部</td>
                            </tr>
                            <tr>
                                <td>12346</td>
                                <td>经理办公室</td>
                                <td>102</td>
                                <td>18.0</td>
                                <td>54.0</td>
                                <td>标高 1</td>
                                <td>18.0</td>
                                <td>管理层</td>
                            </tr>
                            <tr>
                                <td>12347</td>
                                <td>茶水间</td>
                                <td>103</td>
                                <td>8.2</td>
                                <td>24.6</td>
                                <td>标高 1</td>
                                <td>12.5</td>
                                <td>公共区域</td>
                            </tr>
                            <tr>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                            </tr>
                            <!-- 更多数据行 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <button><<</button>
                    <button><</button>
                    <span>第 1 页 / 共 6 页</span>
                    <button>></button>
                    <button>>></button>
                </div>
            </section>
        </div>
    </div>

    <!-- 实际应用中会引用JavaScript文件来处理交互和数据加载 -->
    <!-- <script src="script.js"></script> -->
    <script>
        // 简单的模拟导航点击效果 (实际应用需要JS)
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                document.querySelector('.nav-item.active').classList.remove('active');
                item.classList.add('active');
                // 实际应用中，这里会触发数据加载和表格标题更新
                const viewType = item.getAttribute('data-view');
                document.getElementById('table-title').innerText = item.innerText + ' 数据';
                console.log('切换到视图:', viewType);
                // TODO: 加载对应数据到表格和树状图
            });
        });

         // 简单的模拟树状图展开/折叠 (实际应用需要JS库或更复杂逻辑)
        document.querySelectorAll('.tree-toggle').forEach(toggle => {
            toggle.style.cursor = 'pointer'; // 可点击样式
            toggle.addEventListener('click', (e) => {
                 const parentLi = e.target.closest('li');
                 const subUl = parentLi.querySelector('ul');
                 if (subUl) {
                     if (e.target.classList.contains('expanded')) {
                         e.target.classList.remove('expanded');
                         e.target.classList.add('collapsed');
                         subUl.style.display = 'none';
                     } else {
                         e.target.classList.remove('collapsed');
                         e.target.classList.add('expanded');
                         subUl.style.display = 'block';
                     }
                 }
            });
            // 初始设置
             if (toggle.classList.contains('collapsed')) {
                 const parentLi = toggle.closest('li');
                 const subUl = parentLi.querySelector('ul');
                 if (subUl) subUl.style.display = 'none';
             }
        });
    </script>
</body>
</html>